<template>
  <el-breadcrumb id="breadcrumb-warp" separator="/">
    <el-breadcrumb-item v-for="item in state.currentRoutes" :key="item.path">{{item.name}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { useRouter, onBeforeRouteUpdate,RouteLocationNormalized } from 'vue-router'
  export default defineComponent({
    name: "breadcrumb",
    setup() {
      console.log('route', useRouter())
      let state = reactive({
        currentRoutes: [{}]
      }) 
      state.currentRoutes = useRouter().currentRoute.value.matched.map((item:any) => {
        return {
          name: item.name ?? '首页',
          path: item.path
        }
      })
      onBeforeRouteUpdate((to: RouteLocationNormalized) => {
        state.currentRoutes = to.matched.map((item:any) => {
          return {
            name: item.name ?? '首页',
            path: item.path
          }
        })
      })
      return {
        state
      }
    }
  })
</script>

<style scoped lang="less">
  #breadcrumb-warp {
    height: 50px;
    display: flex;
    align-items: center;
  }
</style>